<template>
	<uni-popup ref="popupRef" :type="type" :is-mask-click="isMaskClick" safe-area>
		<view class="c-popup-content">
			<slot name="title">
				<view class="title">
					{{ title }}
					<view class="icon-close" @click="handleClose">
						<uni-icons type="close" size="24"></uni-icons>
					</view>
				</view>
			</slot>
			<slot></slot>
		</view>
	</uni-popup>
</template>

<script setup>
	import { ref, watchEffect, onMounted } from 'vue';
	const props = defineProps({
		title: {
			type: String,
			default: '标题'
		},
		type: {
			type: String,
			default: 'bottom',
			validator(value) {
				return ['bottom', 'center', 'top', 'left', 'right', 'message', 'dialog', 'share'].includes(value);
			}
		},
		isMaskClick: {
			type: Boolean,
			default: false
		}
	});
	const emits = defineEmits(['handleShow'])
	const popupRef = ref(null);
	

	function handleOpen() {
		popupRef.value && popupRef.value.open();
	}

	function handleClose() {
		popupRef.value && popupRef.value.close();
	}
	
	defineExpose({
		handleOpen,
		handleClose
	})
</script>

<style lang="scss">
	.c-popup-content {
		overflow: hidden;
		min-height: 35vh;
		background-color: $bg-inverse-color;
		padding-bottom: var(--window-bottom);
		border-radius: $radius-24 $radius-24 0 0;
		.title {
			@include f-center;
			position: relative;
			height: 80rpx;
			background-color: $bg-color;
			font-size: $font-30;
			color: $main-color;
			.icon-close {
				position: absolute;
				top: $margin-16;
				right: $margin-16;
			}
		}
	}
</style>
